<template>
    <div class="patient-form">
        <h1>医疗诊断系统</h1>
        <form @submit.prevent="diagnose">
            <div>
                <label for="name">姓名:</label>
                <input id="name" v-model="patient.name" type="text" required />
            </div>
            <div>
                <label for="age">年龄:</label>
                <input id="age" v-model.number="patient.age" type="number" required />
            </div>
            <div>
                <label for="height">身高:</label>
                <input id="height" v-model.number="patient.height" type="number" required step="0.1"/>(米)
            </div>
            <div>
                <label for="weight">体重:</label>
                <input id="weight" v-model.number="patient.weight" type="number" required />(公斤)
            </div>
            <div>
                <label for="medicalHistory">病史:</label>
                <textarea id="medicalHistory" v-model="patient.medicalHistory" rows="4"></textarea>
            </div>
            <button type="submit">诊断</button>
        </form>
        <div v-if="result">
            <h2>诊断结果:</h2>
            <p>患者{{ patient.name }}的诊断结果：{{ result }}</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            patient: {
                name: '',
                age: null,
                height: null,
                weight: null,
                medicalHistory: ''
            },
            result: ''
        };
    },
    methods: {
        diagnose() {
            const bmi = this.calculateBMI();
            if (bmi <= 18.5) {
                this.result = '体重过轻';
            } else if (bmi > 18.5 && bmi <= 24.9) {
                this.result = '正常';
            } else if (bmi > 24.9 && bmi <= 29.9) {
                this.result = '体重过重';
            } else {
                this.result = '肥胖';
            }
        },
        calculateBMI() {
            const heightInMeters = this.patient.height;
            return this.patient.weight / (heightInMeters * heightInMeters);
        }
    }
};
</script>

<style scoped>
/* 添加一些样式 */
.patient-form {
    max-width: 600px;
    margin: auto;
}

div {
    margin-top: 20px;
}

button {
    margin-top: 20px;
}
</style>